import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Timeline, Icon
} from 'antd';

import debounce from 'lodash/debounce';
import styles from './../Home/index.less'

@connect(({ history, loading }) => ({
  history,
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    // this.echarts = window.echarts;
    this.myChart = [];
    this.state = {
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const {
      history: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    console.log('scrollData', scrollData);
    const table = document.querySelector('.homePage');
    if (pageLoaded) {
      setTimeout(function() {
        console.log('table', table);
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);

    } else {
      const {} = this.props;
      dispatch({
        type: `history/changeLoaded`,
      });
    }

    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));


    setInterval(
      () => this.setState({ clock_date: new Date() }),
      1000,
    );

  }

  resize = () => {
    this.changeCustomH();
    this.changeTableY();
  };
  scroll = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'history/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  componentWillUnmount() {
    const table = document.querySelector('.homePage');
    console.log('table', table);
    table.removeEventListener('scroll', debounce(this.scroll, 300));
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
  }



  render() {
    const {
      history: { data, scrollData, pageLoaded, searchParams },

    } = this.props;
    return (
      <div className={`homePage`}
           style={{ height: 'calc(100vh - 98px)', background:'#fff',overflow: 'auto', padding: '15px' }}>
        <Timeline  mode="alternate">
          <Timeline.Item dot={<Icon type="sync" spin style={{ fontSize: '16px' }} />}>
            <h3>页面开发中...</h3>
          </Timeline.Item>
          <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
            <h3>2020-06-10</h3>
            <p>添加水表开关阀功能</p>
          </Timeline.Item>
          <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
            <h3>2020-06-09</h3>
            <p>添加"压力传感器"地图</p>
          </Timeline.Item>
          <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
            <h3>2020-06-08</h3>
            <p>添加"压力传感器"页面</p>
          </Timeline.Item>
          <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
            <h3>2020-05-27</h3>
            <p>修改"首页"样式，添加首页全屏功能</p>
            <p>修改侧边栏</p>
          </Timeline.Item>
          <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
            <h3>2020-05-26</h3>
            <p>添加"水表异常分析""厂商水表分析"页面</p>
            <p>添加"页面更新历史"页面</p>
            <p>"厂商水表分析"添加厂商管理</p>
          </Timeline.Item>
          <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
            <h3>2020-05-25</h3>
            <p>系统总览元素可以拖动改变位置</p>
            <p>添加"水表分析""水表管理"页面</p>

          </Timeline.Item>
          <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
            <h3>2020-05-22</h3>
            <p>确定系统总览需要呈现基本元素</p>
          </Timeline.Item>
        </Timeline>
      </div>
    );
  }
}

export default BasicList;
